.btn-group.pull-right
  button(type='button', reset-key="panelState").btn.btn-default.btn-sm Reset Panels
  button(type='button', reset-key="portletState").btn.btn-default.btn-sm Reset Porlets
h3 Portlets
  small Drag and collapse panels. Refresh and see how their state is automatically saved

.portlets-wrapper
  // START row
  .row
    #portlet-1.col-lg-4(portlet)
      // START panel
      #panelPortlet1.panel.panel-default
        .panel-heading.portlet-handler
          | Default Panel
          paneltool(tool-collapse)
        .panel-wrapper(uib-collapse="panelPortlet1")
          .panel-body
            p
              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
          .panel-footer
            | Panel Footer
      // END panel

      // START panel
      #panelPortlet2.panel.panel-primary
        .panel-heading.portlet-handler
          | Primary Panel
          paneltool(tool-collapse)
        .panel-wrapper(uib-collapse="panelPortlet2")
          .panel-body
            p
              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
          .panel-footer
            | Panel Footer
      // END panel

      // START panel
      #panelPortlet3.panel.panel-success
        .panel-heading.portlet-handler
          | Success Panel
        .panel-body
          p
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer
          | Panel Footer
      // END panel

      // START widget
      #panelPortlet4.panel.widget
        .portlet-handler
          .row.row-table.row-flush
            .col-xs-4.bg-danger.text-center
              em.fa.fa-music.fa-2x
            .col-xs-8
              .panel-body.text-center
                h4.mt0 100%
                p.mb0.text-muted VOLUME
      // END widget

      // START widget
      #panelPortlet5.panel.widget
        .portlet-handler
          .row.row-table.row-flush
            .col-xs-4.bg-inverse.text-center
              em.fa.fa-code-fork.fa-2x
            .col-xs-8
              .panel-body.text-center
                h4.mt0 150 
                p.mb0.text-muted FORKS
      // END widget

    #portlet-2.col-lg-4(portlet)
      // START panel
      #panelPortlet6.panel.panel-info
        .panel-heading.portlet-handler
          | Info Panel
        .panel-body
          p
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer
          | Panel Footer
      // END panel

      // START panel
      #panelPortlet7.panel.panel-warning
        .panel-heading.portlet-handler
          | Warning Panel
        .panel-body
          p
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer
          | Panel Footer
      // END panel

      // START panel
      #panelPortlet8.panel.panel-danger
        .panel-heading.portlet-handler
          | Danger Panel
        .panel-body
          p
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer
          | Panel Footer
      // END panel

      // START widget
      #panelPortlet9.panel.widget
        .portlet-handler
          .row.row-table.row-flush
            .col-xs-12
              .panel-body.text-center.bg-purple
                h4.mt0 10k
                p.mb0.text-white VISITORS
      // END widget

      // START widget
      #panelPortlet10.panel.widget
        .portlet-handler
          .row.row-table.row-flush
            .col-xs-12
              .panel-body.text-center.bg-pink
                h4.mt0 100%
                p.mb0.text-white VOLUME
      // END widget

    #portlet-3.col-lg-4(portlet)
      // START panel
      #panelPortlet11.panel.panel-inverse
        .panel-heading.portlet-handler
          | Inverse Panel
        .panel-body
          p
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer
          | Panel Footer
      // END panel

      // START panel
      #panelPortlet12.panel.panel-purple
        .panel-heading.portlet-handler
          | Purple Panel
        .panel-body
          p
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer
          | Panel Footer
      // END panel

      // START panel
      #panelPortlet13.panel.panel-green
        .panel-heading.portlet-handler
          | Green Panel
        .panel-body
          p
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer
          | Panel Footer
      // END panel

      // START widget
      #panelPortlet14.panel.widget
        .portlet-handler
          .row.row-table.row-flush
            .col-xs-12
              .panel-body.text-center.bg-green
                h4.mt0 150 
                p.mb0.text-white FORKS
      // END widget

      // START widget
      #panelPortlet15.panel.widget
        .portlet-handler
          .row.row-table.row-flush
            .col-xs-12
              .panel-body.text-center.bg-primary
                h4.mt0 10
                p.mb0.text-white NEW MESSAGES
      // END widget

  // END row